<script setup>
// 分类id查询mp图片管理
const {
  data: { multimedia },
} = await getFetchData({
  url: "wx/multimedia/pageMultimedia",
  opts: {
    title: "",
    fileType: 1, //1图片 2 视频
    pageNum: 1,
    pageSize: 999,
    typeId: 1081,
  },
});
const imagesList = ref([]);
imagesList.value = multimedia.map((item) => item.ImgUrl).flat();
</script>

<template>
  <Banner class="mr-b-80" />
  <div class="sub-title">拟邀采购商</div>
  <div class="sub-en">Invited purchaser</div>
  <div class="cate-line"></div>
  <div class="exhi-box mr-b-80">
    <div class="platform-item" v-for="item in imagesList">
      <img :src="item" alt="" />
    </div>
  </div>
</template>

<style scoped>
.sub-title {
  text-align: center;
  color: rgba(66, 66, 66);
  font-size: 3.125vw;
  font-family: SourceHanSansSC-medium;
}

.sub-en {
  text-align: center;
  color: rgba(137, 137, 137);
  font-size: 1.667vw;
}
.cate-line {
  margin-top: 0.677vw;
  width: 4.063vw;
  height: 0.208vw;
  background-color: rgba(255, 100, 0);
  margin-left: 50%;
  transform: translate(-50%);
  margin-bottom: 3.333vw;
}

.exhi-box {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.mr-b-80 {
  margin-bottom: 80px;
}
.platform-item {
  width: 10.052vw;
  margin: 0.521vw 0.521vw 0 0.521vw;
}

.platform-item img {
  width: 100%;
  height: 6.5vw;
  border: 1px solid #eee;
  object-fit: contain;
}
@media (max-width: 768px) {
  .sub-title {
    font-size: 4.267vw;
  }

  .sub-en {
    font-size: 3.2vw;
  }

  .cate-line {
    margin-bottom: 4vw;
  }

  .exhi-box {
    max-width: 90%;
  }

  .platform-item {
    width: 32%;
  }

  .platform-item img,
  .cate-item img {
    height: 16vw;
  }
}
</style>
